<template>
    <!-- 案件基本信息弹窗 -->
    <el-dialog
            :title="caseCode"
            append-to-body
            :close-on-click-modal="false"
            :modal="false"
            top="6rem"
            width="80%"
            custom-class="el-dragable-dialog default-on-right"
            v-el-drag-dialog
            :visible.sync="showCaseInfoDialog"
    >
        <div v-loading="CaseBaseInfoLoading">
            <div class="case-info-swiper">
                <div class="swiper-container caseInfoSwiper displayflex">
                    <div class="swiper-wrapper tupianbox">
                        <div class="swiper-slide tupianjuzhong" v-for="(item,index) in CaseBaseInfo.images" :key="index">
                            <a :href="item" target="_blank">
                                <img class="case-info-img" :src="item" />
                            </a>
                        </div>

                    </div>
                    <div
                            v-loading="mapDataLoading"
                            id="mapBox1"
                            style="height:100%;width:300px;">

                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>

            </div>
            <ul class="main-info-list p20 flex-justify-content">
                <li class="main-info-item width25">
                    <div class="main-info-item-label">当前阶段</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.stage }}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">监督员</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.monitor}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">问题来源</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.source}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">问题类型</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.type}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">大类名称</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.lv1Name}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">小类名称</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.lv2Name}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">所属街道</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.street}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">所属社区</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.community}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">所属网格</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.gridding}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">上报时间</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.appearDate}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">事发位置</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.location}}</div>
                </li>
                <li class="main-info-item width25">
                    <div class="main-info-item-label">问题描述</div>
                    <div class="main-info-item-value">{{CaseBaseInfo.description}}</div>
                </li>
            </ul>
            <div class="blgcTitle main-info-list p20 ">
                <div class="title">办理过程</div>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        height="250"
                        class="custom-shadow-names">
                    <el-table-column
                            prop="xuhao"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="经办人"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="startdate"
                            label="操作时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="办理时限"
                            prop="blsx"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            label="已用时间"
                            prop="yiyongshijian"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="剩余时间"
                            prop="shengyushijian"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="意见"
                            prop="yijian"
                            >
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui

    export default {
        name: "ajInfo",
        directives: { elDragDialog },
        props:{
            value:{
                type:Boolean,
                default:false
            },
            caseId:{
                type:Number,
                default: 0
            },
            caseCode:{
                type:String,
                default:''
            },
            recid: {
                type: Number,
                default:0
            }
        },
        data(){
            return{
                showCaseInfoDialog: false,
                CaseBaseInfo: {},
                caseInfoSwiper:null,
                CaseBaseInfoLoading:false,
                tableData: [],
                mapDataLoading: false,
                map: null,
                markersList: []
            }
        },
        watch:{
            value(newVal){
                this.showCaseInfoDialog = newVal
            },
            showCaseInfoDialog(newVal){
                this.$emit('input',newVal)
            },
            caseId(newVal){
                if(newVal){
                    debugger
                    let biz = runSQLJd("select bizid from tbrec where recid = "+newVal+";");
                    //this.getCaseBaseInfo()
                    this.$http.get(this.baseUrl.searchByRecUrl, {
                        params: {
                            recid: newVal
                        }
                    }).then((rel)=>{
                        debugger
                        let images = []
                        for(let i=0;i< rel.data.img["附件"].length;i++){
                            images.push(this.baseUrl.imgPath + rel.data.img["附件"][i].filepath)
                        }
                        for(let j=0;j< rel.data.img["处置附件"].length;j++){
                            images.push(this.baseUrl.imgPath + rel.data.img["处置附件"][j].filepath)
                        }
                        for(let k=0;k< rel.data.img["核实附件"].length;k++){
                            images.push(this.baseUrl.imgPath + rel.data.img["核实附件"][k].filepath)
                        }
                        for(let m=0;m< rel.data.img["核查附件"].length;m++){
                            images.push(this.baseUrl.imgPath + rel.data.img["核查附件"][m].filepath)
                        }
                        for(let n=0;n< rel.data.img["签字文件"].length;n++){
                            images.push(this.baseUrl.imgPath + rel.data.img["签字文件"][n].filepath)
                        }
                        debugger
                        this.CaseBaseInfo = {
                            stage: rel.data.ACTDEFNAME==undefined?'结案':rel.data.ACTDEFNAME+"阶段",
                            monitor: rel.data.HUMANNAME,
                            source: rel.data.WTLY,
                            type: rel.data.WTLX,
                            lv1Name: rel.data.DL,
                            lv2Name: rel.data.XL,
                            street: rel.data.JD,
                            community: rel.data.SQ,
                            gridding: rel.data.WG,
                            appearDate: rel.data.SBSJSTR,
                            location: rel.data.WZ,
                            description: rel.data.WTMS,
                            images:images
                        };
                        if(biz[0].length){
                            if(biz[0][0].BIZID == 62){
                                let blgcSql = runSQLJd("select * from V$109 where ajbs = "+newVal+";");
                                if(blgcSql[0].length){
                                    debugger
                                    let blgc = blgcSql[0]
                                    for(let i=0;i<blgc.length;i++){
                                        let a = i+1
                                        this.tableData.push({
                                            xuhao: a,
                                            startdate: blgc[i]["操作时间"],
                                            name: blgc[i]["受理人员"],
                                            blsx: blgc[i]["办理时限"],
                                            yiyongshijian: blgc[i]["已用时间"],
                                            shengyushijian: blgc[i]["剩余时间"],
                                            yijian: blgc[i]["办理意见"]
                                        })
                                    }
                                }
                            }else if(biz[0][0].BIZID == 75){
                                let blgcSql = runSQLJd("select * from V$240 where ajbs = "+newVal+";");
                                if(blgcSql[0].length){
                                    debugger
                                    let blgc = blgcSql[0]
                                }
                            }
                        }


                        this.CaseBaseInfoLoading = false;
                        this.map = new AMap.Map("mapBox1", {
                            mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
                            viewMode: "3D",
                            turboMode: true,
                            defaultCursor: "pointer",
                            showBuildingBlock: true,
                            expandZoomRange: true,
                            zooms: [3, 20],
                            zoom: 14,
                            pitch: 60,
                            center: [rel.data.X, rel.data.Y],
                            forceVector: true
                        });
                        var markerContent = `<div class="map-icon-marker" style="background-color: transparent">
                              <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i> </div>
                          </div>`;
                        var position = new AMap.LngLat(rel.data.X, rel.data.Y);
                        var marker = new AMap.Marker({
                            position: position,
                            // 将 html 传给 content
                            content: markerContent,
                            // 以 icon 的 [center bottom] 为原点
                            offset: new AMap.Pixel(3, -66)
                        });
                        this.markersList.push(marker);
                        // 将 markers 添加到地图
                        this.map.add(marker);
                    }).catch((e)=>{
                        console.log(e)
                    })
                }
            }
        },
        mounted() {
            this.showCaseInfoDialog = this.value
        },
        methods: {
            //事件基本信息-图片轮播
            caseInfoSwiperInit() {
                if (this.caseInfoSwiper) this.caseInfoSwiper.destroy(false);
                this.caseInfoSwiper = new Swiper(".caseInfoSwiper", {
                    pagination: {
                        el: ".caseInfoSwiper .swiper-pagination",
                        dynamicBullets: true,
                        autoplay: {
                            delay: 2000,
                            stopOnLastSlide: false,
                            disableOnInteraction: false
                        }
                    }
                });
            },
            //获取某事件的基本信息
            getCaseBaseInfo() {
                console.log('案件id',this.caseId);
                this.CaseBaseInfoLoading = true;
                setTimeout(() => {
                    this.CaseBaseInfoLoading = false;

                    this.$nextTick(()=>{
                        this.caseInfoSwiperInit()
                    })
                }, 1000);
            },
            mapInit() {
                const AMap = window.AMap;
                this.map = new AMap.Map("mapBox", {
                    mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
                    viewMode: "3D",
                    turboMode: true,
                    defaultCursor: "pointer",
                    showBuildingBlock: true,
                    expandZoomRange: true,
                    zooms: [3, 20],
                    zoom: 14,
                    pitch: 60,
                    center: [116.584987,40.118043],
                    forceVector: true
                });
            },
        }
    };
</script>

<style scoped lang="less">
    @import "../../css/mixin.less";
    .caselist-swiper {
        height: calc(100vh - 16rem);
    }
    .caseInfoSwiper{
        width: 100%;
        height: 180px;
    .case-info-img{
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    }
    .width25{
        width: 20%;
    }
    .flex-justify-content{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .swiper-wrapper{
        display: flex;
        justify-content: center;
        width: calc(100% - 300px);
    }
    .tupianjuzhong{
        width: 200px;
    }
    .tupianbox{
        width: calc(100% - 300px);
    }
    .custom-shadow-names::-webkit-scrollbar {
        width: 4px;
    }

    .custom-shadow-names::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    .custom-shadow-names::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
    .displayflex{
        display: flex;

    }
</style>
